<template>
  <div class="add_edit live_broad">
        <div class="add_field">
            <div class="field_list live_basic_info">
                <div class="title">
                    <span class="search_text">直播标题：</span>
                    <span>{{edit_live_title}}</span>
                </div>
                <div class="start_time">
                    <span class="search_text">开始时间：</span>
                    <span>{{edit_start_time}}</span>
                </div>
                <div class="scene">
                    <span class="search_text">直播场景：</span>
                    <span>{{edit_live_scene}}</span>
                </div>
            </div>
            <div class="field_list product_info">
                <div class="project">
                    <span class="search_text">项目：</span>
                    <el-select v-model="edit_project" multiple filterable collapse-tags placeholder="请选择项目">
                        <el-option
                            v-for="item in project_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="live_teacher_name">
                    <span class="search_text">讲师姓名：</span>
                    <el-input v-model="edit_teacher_name" placeholder="请输入讲师姓名" maxlength="64"></el-input>
                </div>
            </div>
            <div class="field_list live_teacher_desc">
                <span class="search_text">讲师介绍：</span>
                <el-input
                    type="textarea"
                    placeholder="请输入讲师介绍，限200个汉字"
                    v-model="edit_teacher_desc"
                    maxlength="200"
                    show-word-limit>
                </el-input>
            </div>
            <div class="field_list desc">
                <span class="search_text">描述：</span>
                <el-input
                    type="textarea"
                    placeholder="请输入直播介绍，限200个汉字"
                    v-model="edit_live_desc"
                    maxlength="200"
                    show-word-limit>
                </el-input>
            </div>
        </div>
        <div class="image">
            <div class="live_image">
                <span class="search_text">大图：</span>
                <img class="promit" src="../../assets/common/promit.svg" alt="">
                <span class="upload_promit">请上传 750 x 422 大小的图片用于详情页配图展示，不超过2M，支持jpg、jpeg、png格式。</span>
                <el-form :model="dataForm" ref="dataForm">
                    <el-form-item :class="{hide:hideBigUpload}">
                        <el-upload 
                            ref="upload" 
                            action="#" 
                            :file-list="dataForm.bigImgFileList"
                            list-type="picture-card"
                            :on-change="OnChangeBigImg"
                            :on-preview="handleBigImg"
                            :on-exceed="handleExceedBigImg"
                            :on-remove="handleRemoveBigImg"
                            accept="image/jpeg,image/png,image/jpg," 
                            :auto-upload="false"
                            :limit="1">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisibleBigImg" append-to-body>
                            <img width="100%" :src="dialogBigImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                </el-form>
            </div>
            <div class="live_thumb_image">
                <span class="search_text">缩略图：</span>
                <img class="promit" src="../../assets/common/promit.svg" alt="">
                <span class="upload_promit">请上传 200 x 150 大小的图片用于列表显示，不超过512K，支持jpg、jpeg、png格式。</span>
                <el-form :model="dataForm" ref="dataForm">
                    <el-form-item :class="{hide:hideThumbUpload}">
                        <el-upload 
                            ref="upload" 
                            action="#" 
                            :file-list="dataForm.thumbImgFileList"
                            list-type="picture-card"
                            :on-change="OnChangeThumbImg"
                            :on-preview="handleThumbImg"
                            :on-exceed="handleExceedThumbImg"
                            :on-remove="handleRemoveThumbImg"
                            accept="image/jpeg,image/png,image/jpg," 
                            :auto-upload="false"
                            :limit="1">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisibleThumbImg" append-to-body>
                            <img width="100%" :src="dialogThumbImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="submit_btn">
            <el-button @click="cancel_save_data">取消</el-button>
            <el-button type="primary" @click="edit_live_info">确定</el-button>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisibleSave"
            width="420px"
            class="save"
            :close-on-click-modal="false">
            <span>{{save_promit_title}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisibleSave = false">确定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="420px"
            class="cancel_save"
            :close-on-click-modal="false">
            <span>现在取消内容将不会被保存，确定取消吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelEditDialog">确定</el-button>
                <el-button type="primary" @click="dialogVisible = false">返回</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  import { api, baseAjax } from '@/api/api';
  import {statusCode} from '../../utils/index';
  import {httpFormUpload} from '../../api/http';
  import Cookies from 'js-cookie';

  export default {
    name:'editLiveBroadcastManagement',
    data() {
      return {
        dialogVisible:false,
        dialogVisibleSave:false,
        save_promit_title:'',
        project_list:[],   //项目下拉框值
        edit_channel_id:null,   //编辑渠道id
        edit_live_title:'',  //编辑标题
        edit_start_time:'',  //编辑开始时间
        edit_live_scene:'',   //编辑直播场景
        edit_project:[],  //编辑选中项目
        edit_teacher_name:'',   //编辑讲师姓名
        edit_teacher_desc:'',   //编辑讲师介绍
        edit_live_desc:'',   //编辑直播描述
        dataForm: {   //上传图片
            bigImgFileList: [],   //大图
            thumbImgFileList:[]    //缩略图
        },
        dialogVisibleBigImg:false,   //大图
        dialogBigImageUrl:'',   //大图url
        dialogVisibleThumbImg:false,   //缩略图
        dialogThumbImageUrl:'',   //缩略图url
        hideBigUpload: false,   //是否显示上传大图的加号
        hideThumbUpload:false,   //是否显示上传缩略图的加号
        user_info:{}
      }
    },
    mounted(){
      this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
      this.getProductList(); //获取产品
      this.get_edit_info();
    },
    methods: {
      //获取所有产品
      getProductList(){
          let that = this;
          baseAjax(api.get_all_product, '', (res)=>{
              if(res.code === statusCode.success){
                  that.project_list = res.data;
              }
          });
      },
      //获取要编辑的信息
      get_edit_info(){
        let live_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('live_info')));
        let productId = [];
        if(live_info.productId && live_info.productId.length){
            live_info.productId.forEach(item=>{
                productId.push(Number(item));
            });
        }
        this.edit_channel_id = live_info.channelId;
        this.edit_live_title = live_info.title;
        this.edit_start_time = live_info.startTime;
        this.edit_live_scene = live_info.liveScenes;
        this.edit_teacher_name = live_info.speaker;
        this.edit_teacher_desc = live_info.speakerIntroduce;
        this.edit_project = productId;
        this.edit_live_desc = live_info.descStr;
        if(live_info.guideImg){
          this.dataForm.bigImgFileList.push({
              url:live_info.guideImg.replace('["', '').replace('"]', '')
          });
        }
        if(live_info.thumbnailImg){
          this.dataForm.thumbImgFileList.push({
              url:live_info.thumbnailImg.replace('["', '').replace('"]', '')
          });
        }
      },
      //显示取消弹框
      cancel_save_data(){
        if(this.edit_teacher_name || this.edit_teacher_desc || this.edit_project.length != 0 || this.edit_live_desc || this.dataForm.bigImgFileList.length != 0 || this.dataForm.thumbImgFileList.length != 0){
            this.dialogVisible = true;
        }else{
            this.$router.go(-1);
        }
      },
      //取消编辑弹框
      cancelEditDialog(){
        this.dialogVisible = false;
        this.$router.go(-1);
        this.edit_channel_id = null;
        this.edit_live_title = '';
        this.edit_start_time = '';
        this.edit_live_scene = '';
        this.edit_teacher_name = '';
        this.edit_teacher_desc = '';
        this.edit_project = [];
        this.edit_live_desc = '';
        this.dataForm.bigImgFileList = [];
        this.dataForm.thumbImgFileList = [];
        this.dialogVisibleBigImg = false;
        this.dialogBigImageUrl = '';
        this.dialogVisibleThumbImg = false;
        this.dialogThumbImageUrl = '';
        this.hideBigUpload = false;
        this.hideThumbUpload = false;
      },
      //编辑直播信息
      edit_live_info(){
        let that = this;
        let product_list = [];
        this.edit_project.forEach(item=>{
            that.project_list.forEach(val=>{
                if(item == val.id){
                    product_list.push({
                        id:val.id,
                        name:val.name
                    });
                }
            });
        });
        let obj = {
            channelId:this.edit_channel_id,
            productList:product_list,
            speaker:this.edit_teacher_name,
            speakerIntroduce:this.edit_teacher_desc,
            descStr:this.edit_live_desc
        };
        //编辑图片-不修改原图片
        if(this.dataForm.bigImgFileList.length == 1 && this.dataForm.bigImgFileList[0].status == 'success'){
            obj.guideImg = this.dataForm.bigImgFileList[0].url;
        }
        if(this.dataForm.thumbImgFileList.length == 1 && this.dataForm.thumbImgFileList[0].status == 'success'){
            obj.thumbnailImg = this.dataForm.thumbImgFileList[0].url;
        }

        //编辑图片-新增图片
        let formData = new FormData();
        if(this.dataForm.bigImgFileList.length == 1 && this.dataForm.bigImgFileList[0].status == 'ready'){
            formData.append('guideImg', this.dataForm.bigImgFileList[0].raw);
        }
        if(this.dataForm.thumbImgFileList.length == 1 && this.dataForm.thumbImgFileList[0].status == 'ready'){
            formData.append('thumbnailImg', this.dataForm.thumbImgFileList[0].raw);
        }
        let data = {
            liveParam:JSON.stringify(obj).replace('[', '%5B').replace(']', '%5D')
        };
        httpFormUpload(api.edit_live_info_url, data, formData, (res)=>{
            if(res.data.code === statusCode.success){
                if(res.data.data == true){
                    that.$router.go(-1);
                    that.$message.success('保存成功');
                }else{
                    that.$message.error('保存失败');
                }
                that.edit_channel_id = null;
                that.edit_live_title = '';
                that.edit_start_time = '';
                that.edit_live_scene = '';
                that.edit_teacher_name = '';
                that.edit_teacher_desc = '';
                that.edit_project = [];
                that.edit_live_desc = '';
                that.dataForm.bigImgFileList = [];
                that.dataForm.thumbImgFileList = [];
                that.dialogVisibleBigImg = false;
                that.dialogBigImageUrl = '';
                that.dialogVisibleThumbImg = false;
                that.dialogThumbImageUrl = '';
                that.hideBigUpload = false;
                that.hideThumbUpload = false;
            }
        });
      },
      //大图上传验证
      OnChangeBigImg(file, fileList){
        let isType = false;
        if(file.raw.type === 'image/jpeg'){
            isType = true;
        }else if(file.raw.type === 'image/jpg'){
            isType = true;
        }else if(file.raw.type === 'image/png'){
            isType = true;
        }
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (isType != true) {
            this.dialogVisibleSave = true;
            this.save_promit_title = '上传的大图只能是 JPG、jpeg、png 格式!';
            fileList.pop();
        }else if (!isLt2M) {
            this.dialogVisibleSave = true;
            this.save_promit_title = '上传的大图大小不能超过 2M!';
            fileList.pop();
        } else {
            this.dataForm.bigImgFileList.push(file);
        }
        this.hideBigUpload = fileList.length == 1;
      },
      //查看图片
      handleBigImg(file){
        this.dialogVisibleBigImg = true;
        this.dialogBigImageUrl = file.url;
      },
      //限制大图数量提示
      handleExceedBigImg(){
        this.dialogVisibleSave = true;
        this.save_promit_title = '只能选择1张大图';
      },
      //删除大图
      handleRemoveBigImg(){
        this.dataForm.bigImgFileList = [];
        this.dialogVisibleBigImg = false;
        this.dialogBigImageUrl = '';
        this.hideBigUpload = false;
      },
      //缩略图上传验证
      OnChangeThumbImg(file, fileList) {
        let isType = false;
        if(file.raw.type === 'image/jpeg'){
            isType = true;
        }else if(file.raw.type === 'image/jpg'){
            isType = true;
        }else if(file.raw.type === 'image/png'){
            isType = true;
        }
        const isLt5 = file.size / 1024 < 512;
        if (isType != true) {
            this.dialogVisibleSave = true;
            this.save_promit_title = '上传的缩略图只能是 JPG、jpeg、png 格式!';
            fileList.pop();
        }else if (!isLt5) {
            this.dialogVisibleSave = true;
            this.save_promit_title = '上传的缩略图大小不能超过 512k!';
            fileList.pop();
        } else {
            this.dataForm.thumbImgFileList.push(file);
        }
        this.hideThumbUpload = fileList.length == 1;
      },
      //查看缩略图
      handleThumbImg(file){
        this.dialogVisibleThumbImg = true;
        this.dialogThumbImageUrl = file.url;
      },
      //限制缩略图数量
      handleExceedThumbImg(){
        this.dialogVisibleSave = true;
        this.save_promit_title = '只能上传1张缩略图';
      },
      //删除缩略图
      handleRemoveThumbImg(){
        this.dataForm.thumbImgFileList = [];
        this.dialogVisibleThumbImg = false;
        this.dialogThumbImageUrl = '';
        this.hideThumbUpload = false;
      }
    }
  }
</script>

<style lang="less" scoped>
.live_broad{
    .add_field{
        .live_basic_info{
            display:flex;
            div{
                margin-right:68px;
                .search_text{
                    margin-bottom:0;
                }
            }
        }
        .product_info{
            display:flex;
            justify-content:space-between;
            .live_teacher_name{
                width:50%;
                margin-right:20px;
                .el-input{
                    width:105%;
                    display:block;
                    .el-input__inner{
                        width:100%;
                    }
                }
            }
        }
        .live_teacher_desc{
            /deep/.el-textarea{
                .el-textarea__inner{
                    resize: none;
                    height: 32px;
                    border-radius: 2px;
                    border: 1px solid #DDDFE6;
                }
                .el-input__count{
                    bottom:9px;
                }
            }
        }
    }
}
</style>
